<template>
  <div style="position: relative">
    <div style="margin-left:20px;margin-bottom: 10px;font-size: 16px;line-height: 20px;">
      {{ statItem.stat }}
    </div>
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in statItem.items" :key="index" :label="item.name">
        <div v-if="'appointInfoStat' == item.code">
          <div>
            <div style="display: flex;flex-direction: row;justify-content: flex-start;">
              <div v-for="(stat,index) in testDriverStat" :key="index" :style="{backgroundColor: subItemCode == stat.code ? '#CC020C' : '#FEF1F0',color: subItemCode == stat.code ? '#FFFFFF' : ''}" class="testDriverStat" @click="chooseTestDriverStat(stat)">
                {{ stat.name }}
              </div>
            </div>
            <div
              :id="subItemCode"
              style="width: 886px; height: 200px; background-color: #F6F6F6; display: flex; justify-content: center; align-items: center"/>
          </div>
        </div>
        <div
          v-else
          :id="item.code"
          style="width: 886px; height: 200px; background-color: #F6F6F6; display: flex; justify-content: center; align-items: center"/></el-tab-pane>
    </el-tabs>
    <div :style="{right: (subItemCode == 'appointTestDriverNums'||subItemCode == 'appointTestDriverNumsOfProvinces'||subItemCode == 'appointTestDriverNumsOfCities' || subItemCode == 'appointTestDriverNumsOfDealers') ? '98px' : '10px'}" class="top-right-button">
      <div>
        <el-select v-model="dateType" :clearable="true" size="mini" placeholder="时间类型选择" @change="changeDataType">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </div>
      <div v-if="dateType=='day'">
        <el-date-picker
          v-model="selectDateRange"
          :clearable="false"
          :picker-options="{firstDayOfWeek:1}"
          value-format="yyyy-MM-dd"
          size="mini"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeDate"/>
      </div>
      <div v-if="dateType=='week'">
        <el-date-picker
          v-model="selectedStartDate"
          :picker-options="{firstDayOfWeek:1}"
          :clearable="false"
          size="mini"
          type="week"
          format="第WW周"
          placeholder="选择周"
          @change="changeDate"/>
      </div>
      <div v-if="dateType=='month'">
        <el-date-picker
          v-model="selectedStartDate"
          :clearable="false"
          value-format="yyyy-MM-dd"
          size="mini"
          type="month"
          placeholder="选择月"
          @change="changeDate"/>
      </div>
    </div>
    <div v-for="(item,index) in statItem.items" :key="index" :label="item.name" style="position: absolute;right: 0px;top:36px;right: 10px">
      <el-button v-if="'appointInfoStat' == item.code" size="mini" icon="el-icon-files" type="primary" @click="detail">详情</el-button>
      <el-button size="mini" icon="el-icon-download" type="primary" @click="exportStat">导出</el-button>
    </div>
    <el-dialog v-if="showTable" :visible.sync="showTable" :show-close="false" width="50%" title="选配车型数据">
      <el-table :data="tableData" :stripe="true" :border="true">
        <el-table-column type="index" width="auto" min-width="5%" label="序号"/>
        <el-table-column width="auto" min-width="50%" property="name" label="车型名称"/>
        <el-table-column width="auto" min-width="30%" property="code" label="车型代码"/>
        <el-table-column width="auto" min-width="15%" property="count" label="选配数量"/>
      </el-table>
    </el-dialog>
    <showDialog v-if="dialogVisible" :dialog-visible.sync="dialogVisible" :title="text" />

  </div>

</template>

<script>
import {
  getEchartsLineData,
  getEchartsBarData,
  getModelsDataBySeries,
  exportMessage
} from '@/api/dashboard'
import moment from 'moment'
import * as echarts from 'echarts'
import { exportFile } from '@/utils'
import BaseTable from '@/components/BaseTable'
import showDialog from './showDialog'
export default {
  name: 'StatItem',
  components: {
    BaseTable,
    showDialog

  },
  props: {
    statItem: Object
  },
  data() {
    return {
      search: {
        limit: 10,
        pageNum: 1,
        userName: '',
        phone: '',
        seriesId: '',
        driveDate: '',
        preBuyDate: ''
      },
      testDriverStat: [{
        name: '预约试驾省份',
        code: 'appointTestDriverNumsOfProvinces',
        type: 'bar'
      }, {
        name: '预约试驾城市',
        code: 'appointTestDriverNumsOfCities',
        type: 'bar'
      }, {
        name: '经销商',
        code: 'appointTestDriverNumsOfDealers',
        type: 'bar'
      }],
      subItemCode: '',
      options: [
        {
          value: 'day',
          label: '日'
        },
        {
          value: 'week',
          label: '周'
        },
        {
          value: 'month',
          label: '月'
        }
      ],
      dateType: '',
      selectDateRange: [],
      selectedStartDate: '',
      selectedEndDate: '',
      myChart: null,
      yList: [],
      chartType: '',
      echartsBarData: [],
      echartsLineData: [],
      dialogVisible: false,
      text: '',
      way: '',
      showTable: false,
      tableData: [{
        name: 'N801 BEV凯锐中体液刹3360 106.95kwh侧开单门货箱(铁铝',
        code: 'A3H1EECY9NCA000400',
        count: '50'
      }, {
        name: '凯锐EV106.95KWH风冷中液6T单3360豪',
        code: 'A3H1CECZ1NCS000401',
        count: '28'
      }, {
        name: '顺达窄体液刹3360单排物流车 6T-89.1kwh',
        code: 'A3P2RUCA3NJA000400',
        count: '1'
      }]
    }
  },
  mounted() {
    // this.searchHandle()
    this.yList = []
    this.subItemCode = this.statItem.items[0].code
    this.chartType = this.statItem.items[0].type
    // 默认起止日期为本周
    this.selectedStartDate = moment().weekday(1).format('YYYY-MM-DD') // 本周一
    this.selectedEndDate = moment().weekday(7).format('YYYY-MM-DD') // 本周日
    this.renderChart()
  },
  methods: {
    detail() {
      this.text = '试驾详情'
      this.way = 'detail'
      this.dialogVisible = true
      // this.searchHandle()
    },
    // 日期格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    changeDataType() {
      if (this.dateType == 'day') {
        // this.selectedStartDate = moment().format('YYYY-MM-DD')
        // this.selectedEndDate = moment().format('YYYY-MM-DD')
        this.selectDateRange = [this.selectedStartDate, this.selectedEndDate]
      } else if (this.dateType == 'week') {
        this.selectedStartDate = moment().weekday(1).format('YYYY-MM-DD') // 本周一
        this.selectedEndDate = moment().weekday(7).format('YYYY-MM-DD') // 本周日
      } else if (this.dateType == 'month') {
        this.selectedStartDate = new Date(moment().startOf('month').format('yyyy-MM-DD'))
        this.selectedEndDate = new Date(moment().endOf('month').format('yyyy-MM-DD'))
      } else {
        this.selectedStartDate = moment().weekday(1).format('YYYY-MM-DD') // 本周一
        this.selectedEndDate = moment().weekday(7).format('YYYY-MM-DD') // 本周日
        this.selectDateRange = [this.selectedStartDate, this.selectedEndDate]
      }
      this.renderChart()
    },
    handleClick(item) {
      if (this.statItem.items[item.index].code === 'appointInfoStat') {
        this.chooseTestDriverStat(this.testDriverStat[0])
      } else {
        this.subItemCode = this.statItem.items[item.index].code
        this.chartType = this.statItem.items[item.index].type
        this.renderChart()
      }
    },
    chooseTestDriverStat(item) {
      this.subItemCode = item.code
      this.chartType = item.type
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    changeDate(val) {
      if (this.dateType == 'day') {
        this.selectedStartDate = val[0]
        this.selectedEndDate = val[1]
      } else if (this.dateType == 'week') {
        this.selectedStartDate = moment(val).startOf('isoWeek').format('YYYY-MM-DD')
        this.selectedEndDate = moment(val).endOf('isoWeek').format('YYYY-MM-DD')
      } else if (this.dateType == 'month') {
        this.selectedStartDate = new Date(moment(val).startOf('month').format('yyyy-MM-DD'))
        this.selectedEndDate = new Date(moment(val).endOf('month').format('yyyy-MM-DD'))
      }
      this.renderChart()
      console.log('selectedStartDate:', this.selectedStartDate)
      console.log('selectedEndDate:', this.selectedEndDate)
    },
    // 导出数据
    exportStat() {
      console.log('导出数据为：', this.subItemCode)
      if (this.subItemCode === 'visitNums' || this.subItemCode === 'visitTimes' || this.subItemCode === 'newAndOld' || this.subItemCode === 'loginNums') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            for (let i = 0; i < res.length; i++) {
              res[i].dirve_date = moment(res[i].dirve_date).format('YYYY-MM-DD HH:mm')
              res[i].pre_buy_date = moment(res[i].pre_buy_date).format('YYYY-MM-DD HH:mm')
            }
            const option = {
              tHeader: ['时间', '访问人数', '新用户', '老用户', '访问次数', '登陆人数'],
              filterVal: ['datetime', 'visitNums', 'newUser', 'oldUser', 'visitTimes', 'loginNums'],
              table: res,
              fileName: '访问统计'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'payTimes' || this.subItemCode === 'payAndRefundNums' || this.subItemCode === 'payAndRefundAmount' || this.subItemCode === 'cancelCarAmount') {
        console.log('导出支付表格')
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            for (let i = 0; i < res.length; i++) {
              res[i].dirve_date = moment(res[i].dirve_date).format('YYYY-MM-DD HH:mm')
              res[i].pre_buy_date = moment(res[i].pre_buy_date).format('YYYY-MM-DD HH:mm')
            }
            const option = {
              tHeader: ['时间', '支付笔数', '支付金额', '支付人数', '退款人数'],
              filterVal: ['datetime', 'payTimes', 'payAndRefundNums', 'payAndRefundAmount', 'cancelCarAmount'],
              table: res,
              fileName: '支付统计'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'visitPageNums') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            for (let i = 0; i < res.length; i++) {
              res[i].dirve_date = moment(res[i].dirve_date).format('YYYY-MM-DD HH:mm')
              res[i].pre_buy_date = moment(res[i].pre_buy_date).format('YYYY-MM-DD HH:mm')
            }
            const option = {
              tHeader: ['时间', '首页', '选车', '门店', '我的'],
              filterVal: ['datetime', 'index', 'productInfo', 'shop', 'mine'],
              table: res,
              fileName: '访问人数'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'visitPageTimes') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            const option = {
              tHeader: ['时间', '首页', '选车', '门店', '我的'],
              filterVal: ['datetime', 'index', 'productInfo', 'shop', 'mine'],
              table: res,
              fileName: '访问次数'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'shareNums') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            const option = {
              tHeader: ['时间', '活动', '产品', '配置'],
              filterVal: ['datetime', 'activityInfo', 'productInfo', 'index'],
              table: res,
              fileName: '分享人数'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'shareTimes') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            const option = {
              tHeader: ['时间', '活动', '产品', '配置'],
              filterVal: ['datetime', 'activityInfo', 'productInfo', 'index'],
              table: res,
              fileName: '分享次数'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'appointTestDriverNums') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            const option = {
              tHeader: ['时间', '预约试驾人数'],
              filterVal: ['datetime', 'driveNums'],
              table: res,
              fileName: '试驾人数'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'appointTestDriverNumsOfProvinces') {
        console.log(this.echartsBarData)
        console.log(this.yList)
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(this.echartsBarData[0].data)
            const option = {
              tHeader: ['预约试驾省份', moment(this.selectedStartDate).format('yyyy-MM-DD') + '至' + moment(this.selectedEndDate).format('yyyy-MM-DD')],
              filterVal: ['yname', 'data'],
              table: res,
              fileName: '省份'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'appointTestDriverNumsOfCities') {
        console.log(this.echartsBarData)
        console.log(this.yList)
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(this.echartsBarData[0].data)
            const option = {
              tHeader: ['预约试驾城市', moment(this.selectedStartDate).format('yyyy-MM-DD') + '至' + moment(this.selectedEndDate).format('yyyy-MM-DD')],
              filterVal: ['yname', 'data'],
              table: res,
              fileName: '城市'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'appointTestDriverNumsOfDealers') {
        console.log(this.echartsBarData)
        console.log(this.yList)
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(this.echartsBarData[0].data)
            const option = {
              tHeader: ['经销商', moment(this.selectedStartDate).format('yyyy-MM-DD') + '至' + moment(this.selectedEndDate).format('yyyy-MM-DD')],
              filterVal: ['yname', 'data'],
              table: res,
              fileName: '经销商'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'selectConfNums') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            const option = {
              tHeader: ['时间', '选配人数', '选配完成人数'],
              filterVal: ['datetime', 'car', 'configuration'],
              table: res,
              fileName: '选配人数'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      } else if (this.subItemCode === 'selectConfStat') {
        exportMessage({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode })
          .then(res => {
            console.log(res)
            const option = {
              tHeader: ['车系', '车型名称', '车型代码', moment(this.selectedStartDate).format('yyyy-MM-DD') + '至' + moment(this.selectedEndDate).format('yyyy-MM-DD')],
              filterVal: ['seriesName', 'modelName', 'modelCode', 'count'],
              table: res,
              fileName: '选配车型数据'
            }
            exportFile(option, () => {
            })
          })
          .catch(err => {})
      }
    },
    renderChart() {
      if (this.chartType === 'bar') {
        this.getEchartsBarData()
      } else if (this.chartType === 'line') {
        this.getEchartsLineData()
      }
    },
    // 获取柱状图统计图数据
    getEchartsBarData() {
      getEchartsBarData({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode }).then(res => {
        if (res.series != null && res.series.length > 0) {
          this.echartsBarData = res.series
          this.yList = res.ylist
          console.log(this.yList)
          console.log(this.echartsBarData)
        } else {
          this.echartsBarData = []
        }
      }).then(() => {
        // this.RenderBarEcharts()
        if (this.subItemCode == 'payAndRefundAmount') {
          this.RenderBarEchartsPortait()
        }
        if (this.subItemCode == 'appointInfoStat' || this.subItemCode == 'selectConfStat' || this.subItemCode == 'appointTestDriverNumsOfProvinces' || this.subItemCode == 'appointTestDriverNumsOfCities' || this.subItemCode == 'appointTestDriverNumsOfDealers') {
          this.RenderBarEchartsHorizontal()
        }
      }).catch(err => {
      })
      // this.echartsBarData = [
      // {
      //   name: '2011',
      //   type: 'bar',
      //   data: [18203, 23489, 29034, 104970, 131744, 630230]
      // }
      // {
      //   name: '2012',
      //   type: 'bar',
      //   data: [19325, 23438, 31000, 121594, 134141, 681807]
      // }
      // ]
    },
    // 获取折线图统计图数据
    getEchartsLineData() {
      getEchartsLineData({ startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss'), statCode: this.subItemCode }).then(res => {
        console.log(res)
        if (res.series != null && res.series.length > 0) {
          this.echartsLineData = res.series
        } else {
          this.echartsLineData = []
        }
      }).then(() => {
        this.RenderLineEcharts()
      }).catch(err => {
      })
    },
    // 生成纵向柱状图
    RenderBarEchartsPortait() {
      if (
        this.myChart !== null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart = null
      }
      this.myChart = echarts.init(document.getElementById(this.subItemCode)) // 取dom 渲染图表
      // 给纵向柱状图增加时间
      var categorie = []
      const start = moment(this.selectedStartDate)
      const end = moment(this.selectedEndDate)
      const day = end.diff(start, 'days')
      categorie.push(start.format('yyyy-MM-DD'))
      for (let i = 1; i <= day; i++) {
        categorie.push(start.add(1, 'days').format('yyyy-MM-DD'))
      }
      // 绘制图表
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          data: categorie,
          boundaryGap: true,
          triggerEvent: true,
          // 设置x轴文字倾斜显示
          axisLabel: {
            interval: 0,
            rotate: 30,
            formatter: function(value) {
              var val = ''
              if (value.length > 5) {
                val = value.substr(0, 5) + '...'
                return val
              } else {
                return value
              }
            }
          },
          grid: {
            bottom: '0'
          }
        },
        yAxis: {
          min: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemDistance: 20,
          top: '10px',
          left: '30px',
          borderWidth: 0
        },
        series: this.echartsBarData
      })
    },
    // 生成横向柱状图
    RenderBarEchartsHorizontal() {
      if (
        this.myChart !== null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart = null
      }
      this.myChart = echarts.init(document.getElementById(this.subItemCode)) // 取dom 渲染图表
      // 绘制图表
      this.myChart.setOption({
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          minInterval: 1
        },
        yAxis: {
          type: 'category',
          data: this.yList
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemDistance: 20,
          top: '10px',
          left: '30px',
          borderWidth: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: this.echartsBarData
      })
      this.myChart.on('click', (param) => {
        if (this.subItemCode !== 'selectConfStat') {
          return
        }
        this.clickShowTable(param.name)
      })
    },
    clickShowTable(name) {
      this.showTable = true
      this.tableData = []
      this.getClickData(name)
    },
    getClickData(name) {
      getModelsDataBySeries({ seriesName: name, startDate: moment(this.selectedStartDate).startOf('day').format('yyyy-MM-DD HH:mm:ss'), endDate: moment(this.selectedEndDate).endOf('day').format('yyyy-MM-DD HH:mm:ss') }).then(res => {
        if (res != null && res.length > 0) {
          this.tableData = res
        } else {
          this.tableData = []
        }
      }).catch(err => {
      })
    },
    // 生成折线图
    RenderLineEcharts() {
      if (
        this.myChart !== null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart = null
      }
      this.myChart = echarts.init(document.getElementById(this.subItemCode)) // 取dom 渲染图表
      var categorie = []
      const start = moment(this.selectedStartDate)
      const end = moment(this.selectedEndDate)
      const day = end.diff(start, 'days')
      categorie.push(start.format('yyyy-MM-DD'))
      for (let i = 1; i <= day; i++) {
        categorie.push(start.add(1, 'days').format('yyyy-MM-DD'))
      }
      // 绘制图表
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: categorie
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            align: 'left'
          }
        },
        label: {
          show: true
        },
        legend: {
          itemDistance: 20,
          top: '0',
          borderWidth: 0
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '10%',
          bottom: '10%'
        },
        series: this.echartsLineData
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .el-tabs__item.is-active{
    color: #CC020C !important;
  }
  .el-tabs__item:hover{
    color: #CC020C !important;
  }
  .el-tabs__item{
    font-size: 12px!important;
    //padding: 0 10px;
  }
  .el-input{
    width: 120px !important;
  }
  .el-range-input{
    width: 70px !important;
  }
  .el-input__icon{
    width: 18px !important;
  }
  .el-range-editor.el-input__inner{
    width: 200px !important;
  }
  .el-range-separator{
    padding: 0 !important;
    width: 15px !important;
  }
}

.top-right-button {
  position: absolute;
  top:36px;
  width: 400px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start
}

.testDriverStat {
  height: 24px;
  width: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 10px 15px;
  border-radius: 8px
}

</style>
